import {
  useDOM,
  useReactive
} from '../MVVM/index';

function App() {

  //初始化state数据
  const state = useReactive({
    count: 0,
    name: 'datian'
  });

  // console.log(state.count);
  // state.count += 1;

  //定义方法
  const add = (num) => {
    state.count += num;
  };

  const minus = (num) => {
    state.count -= num;
  }

  const changeName = (name) => {
    state.name = name;
  }

  return {
    //返回初始化模板格式
    template: `
      <h1>{{count}}</h1>
      <h2>{{name}}</h2>
      <button onClick="add(2)">+</button>
      <button onClick="minus(1)">-</button>
      <button onClick="changeName('大田')">Change Name</button>
    `,
    //返回初始化state对象数据
    state,
    //返回初始化的自定义方法对象集合
    methods: {
      add,
      minus,
      changeName
    }
  }
}

//执行useDOM()才能执行App()才能拿到闭包里的属性和方法
useDOM(
  //App()执行后返回template,state,methods的对象
  App(),
  document.querySelector('#app')
);